<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="operation">
            <mat-header-cell *matHeaderCellDef>操作</mat-header-cell>
            <mat-cell *matCellDef="let item">
                <div class="open">
                    <button class="btn btn-success" data-toggle="dropdown" aria-expanded="true">操作
                        <span class="caret margin5"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a [routerLink]="['/users-demo/detail', item.userCode]">用户详情</a>
                        </li>
                        <li>
                            <a [routerLink]="['/users-demo/edit', item.userCode]" class="ng-scope">用户修改</a>
                        </li>
                        <li>
                            <a [routerLink]="['/users-demo/schedule', item.userCode]" class="ng-scope">工作日志</a>
                        </li>
                        <li>
                            <a [routerLink]="['/users-demo/file-upload', item.userCode]" class="ng-scope">图片上传</a>
                        </li>
                    </ul>
                </div>
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef>姓名</mat-header-cell>
            <mat-cell *matCellDef="let item" [innerHtml]="item.name | highLight:userName"></mat-cell>
        </ng-container>

        <ng-container matColumnDef="loginName">
            <mat-header-cell *matHeaderCellDef>登录名</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.loginName}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="gender">
            <mat-header-cell *matHeaderCellDef>性别</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.gender}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef>人生状态</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.status}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]">
    </mat-paginator>
</div>